<Lists::EntityListContainer
  @entityType={{@entityType}} as |entityList|
>
  <ConcurrencyTaskStateHandler @task={{entityList.hydrateEntitiesTask}}>
    <section class="nacho-container entity-list">
      <header>
        <h4 class="entity-list__title">
          <aside class="entity-list__item__checkbox-cell">
            {{#if entityList.count}}
              <Input
                type="checkbox"
                name="entity-list-item"
                id="group-checkbox-for-{{entityList.name}}"
                checked={{entityList.selectedAll}}
                @change={{action entityList.onSelectEntityList}}
              />
              <label
                class="entity-list__checkbox"
                for={{concat "group-checkbox-for-" entityList.name}}
              />
            {{/if}}
          </aside>
          <strong>
            {{entityList.listName}}
          </strong>
        </h4>

        {{! indicator for number of items selected in the list }}
        {{#if (and entityList.count entityList.selectedEntities.length)}}
          <span class="entity-list__selection-meta">
            {{pluralize entityList.selectedEntities.length entityList.name}} selected
          </span>
        {{/if}}

        <p class="entity-list__page-meta">
          {{! Hides the group cta buttons if more than one item is selected }}
          {{#if entityList.hasMultipleSelected}}
            {{! Implemented as native button elements since handlers are implemented on container }}
            <button
              type="button"
              onclick={{action entityList.removeAllSelected}}
              class="entity-list-toggle nacho-button nacho-button--secondary nacho-button--small"
            >
              {{fa-icon "times"}}
              <span>Remove from list</span>
            </button>

            {{#if (eq entityList.dataModel.displayName "ml-features")}}
              <Features::DownloadConfig @entity={{entityList.selectedEntities}} />
            {{/if}}
          {{else}}
            {{#if entityList.count}}
              Showing {{entityList.count}} of {{entityList.count}} {{pluralize entityList.count entityList.name without-count=true}}
            {{/if}}
          {{/if}}
        </p>
      </header>

      {{#each entityList.list as |item|}}
        {{! TODO: META-8451 this should be a component that search composes instead of a search/search-result component}}
        <Search::SearchResult
          @result={{item.entity}}
          @class="entity-list__item"
          @meta={{props.meta}}
          @searchConfig={{entityList.dataModel.renderProps.list.searchResultConfig}}
        >

          <aside class="entity-list__item__checkbox-cell">
            <Input
              id="{{item.entity.entity.urn}}-checkbox"
              type="checkbox"
              name="entity-list-item"
              checked={{contains item.entity entityList.selectedEntities}}
              @change={{action entityList.onSelectEntity item.entity}}
            />
            <label
              class="entity-list__checkbox"
              for={{concat item.entity.entity.urn "-checkbox"}}
            />
          </aside>

          {{! links to the entity page for this entity }}
          <DynamicLink
            @route={{item.linkAttr.link.route}}
            @models={{item.linkAttr.link.model}}
            @queryParams={{item.linkAttr.link.queryParams}}>
            <strong>
              {{item.entity.entity.name}}
            </strong>
          </DynamicLink>

          {{! contains cta components for the list item }}
          <aside class="entity-list__item__action-bar">
            <Lists::ToggleOnList
              @entity={{item.entity}}
              @didToggleEntity={{perform entityList.hydrateEntitiesTask}}
              class="nacho-button--small"
              disabled={{entityList.hasMultipleSelected}}
            />
            <Features::DownloadConfig
              @entity={{item.entity}}
              disabled={{entityList.hasMultipleSelected}}
            />
          </aside>
        </Search::SearchResult>
      {{else}}
        <EmptyState>
          <p>
            <strong>
              You haven't added any {{entityList.dataModel.displayName}} to this list
            </strong>
          </p>

          <p>
            You can add a {{entityList.name}} by clicking the <code>Add to list</code> button on the {{entityList.name}}'s entity (detail) page, or via search results
          </p>

          <LinkTo
            class="nacho-button nacho-button--tertiary"
            @route="browse.entity"
            @model={{entityList.dataModel.displayName}}
            @query={{hash page=1 path=undefined}}
          >
            Browse all {{entityList.dataModel.displayName}}
          </LinkTo>
        </EmptyState>
      {{/each}}
    </section>
  </ConcurrencyTaskStateHandler>
</Lists::EntityListContainer>
